<template>
  <svg
    class="yindu-icon"
    width="20"
    height="20"
    viewBox="0 0 20 20"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M12.045 15.8335L10.0033 18.7502L7.96168 15.8335H2.50335C2.28233 15.8335 2.07037 15.7457 1.91409 15.5894C1.75781 15.4332 1.67001 15.2212 1.67001 15.0002V3.33352C1.67001 3.1125 1.75781 2.90054 1.91409 2.74426C2.07037 2.58798 2.28233 2.50018 2.50335 2.50018H17.5033C17.7243 2.50018 17.9363 2.58798 18.0926 2.74426C18.2488 2.90054 18.3367 3.1125 18.3367 3.33352V15.0002C18.3367 15.2212 18.2488 15.4332 18.0926 15.5894C17.9363 15.7457 17.7243 15.8335 17.5033 15.8335H12.045ZM11.1775 14.1668H16.67V4.16685H3.33668V14.1668H8.82918L10.0033 15.8435L11.1775 14.1668Z"
    />
  </svg>
</template>

<script setup lang="ts">
type Props = {
  fill?: string;
};

const props = withDefaults(defineProps<Props>(), {
  fill: "#3D88F2",
});

const fillColor = computed(() => {
  return props.fill;
});
</script>
<style scoped lang="less">
.yindu-icon {
  & path,
  & polygon {
    fill: v-bind(fillColor);
  }
}
</style>
